<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<f:view>
		<div align="center">
			<h:form>
				<rich:panel style="width:30%;">
					<f:facet name="header">
						<h:outputText value="Login please" />
					</f:facet>
					<h:panelGrid columns="2">
						<h:outputText value="Name:" />
						<rich:inplaceInput id="name" value="#{ExecuteBean.name}"
							defaultLabel="Enter your name" required="true"
							requiredMessage="Enter your name, please" />
						<h:outputText value="Age:" />
						<rich:inputNumberSpinner id="age" value="#{ExecuteBean.age}"
							minValue="0" maxValue="100" />
					</h:panelGrid>
					<a4j:region>
						<h:panelGrid columns="2" id="panelPelicula" bgcolor="#EEEEEE">				
							<h:outputText value="" />
							<h:outputText value="This is a region" />
							<h:outputText value="Director:" />
							<h:selectOneMenu id="dir" defaultLabel="Select a Director"
								value="#{ExecuteBean.selectedDirector}"
								required="true"
								requiredMessage="Select a Director please" >
								<f:selectItems value="#{ExecuteBean.listDirectors}" />
							</h:selectOneMenu>
							<h:outputText value="Movie:" />
							<h:selectOneMenu defaultLabel="Select a Movie"
								value="#{ExecuteBean.selectedMovie}"
								disabled="#{not ExecuteBean.renderMovies}">
								<f:selectItems value="#{ExecuteBean.listMovies}" />
							</h:selectOneMenu>							
						</h:panelGrid>
						<a4j:commandButton action="#{ExecuteBean.changeDirector}"
								value="Execute @region" render="panelPelicula,outputPelicula"
								execute="@region" />
					</a4j:region>
					<a4j:commandButton value="Execute @form" 
						render="outputForm, outputPelicula"
						execute="@form" />
				</rich:panel>
			</h:form>
			<rich:panel id="outputForm" style="width:30%;">
				<f:facet name="header">
					<h:outputText value="outputForm" />
				</f:facet>
				<rich:messages />
				<h:outputFormat value="Hello {0}, you are {1} years old"
					rendered="#{ExecuteBean.renderOutputForm}">
					<f:param value="#{ExecuteBean.name}" />
					<f:param value="#{ExecuteBean.age}" />
				</h:outputFormat>
			</rich:panel>
			<a4j:outputPanel>
				<rich:panel id="outputPelicula" style="width:30%;">
					<f:facet name="header">
						<h:outputText value="outputPelicula" />
					</f:facet>
					<h:outputText value="Director:" />
					<h:outputText value="#{ExecuteBean.selectedDirector}" />
					<br/>
					<h:outputText value="Movie:" />
					<h:outputText value="#{ExecuteBean.selectedMovie}" />	
				</rich:panel>
			</a4j:outputPanel>
		</div>
	</f:view>
</h:body>
</html>